import React from 'react';
import '$asset/css/admin.less';
import AdminLayout from '$component/admin/layout/layout.jsx'
import {ProgressBar} from 'reprogressbars';
import commonStore from '$store/admin/common'
import {observer} from 'mobx-react'
import {HashRouter as Router, Route, Switch, Redirect} from 'react-router-dom'
import {TransitionGroup, CSSTransition} from 'react-transition-group';
import Error404 from './pages/404/Error404'
import UserManager from '$page/admin/pages/user/index'
import Contract from '$page/admin/pages/contract/index'
import Cost from "$page/admin/pages/cost/index"
import Empty from './pages/empty/empty'
import DevTools from 'mobx-react-devtools'
import _ from 'lodash'
import {UserApi} from '$api';

//通过href 鉴权
function PrivateRoute({component: Component, ...rest}) {
  try {
    let isPass = true;
    if (arguments) {
      let arg = arguments[0];
      isPass = arg.rules.indexOf(arg.location.pathname) !== -1;
    }
    return <Route {...rest} render={props => isPass ? (
      <Component {...props} />
    ) : <Redirect
      to={{
        pathname: '/404',
        state: {from: props.location}
      }}
    />}/>
  } catch (e) {
    return <Route {...rest} render={props => <Component {...props} />}/>
  }
}

class Test extends React.Component {
  componentDidMount() {
    UserApi.getNormalUsers({page: 1, size: 5})
  }

  render() {
    return (
      <div>
        123456
      </div>
    );
  }
}

@observer
class Admin extends React.Component {

  constructor(props) {
    super(props);
    this.getUrlHrefs();
  }

  getUrlHrefs = () => {
    let hrefs = [];
    let navData = window.__INITIAL_STATE__.navData;
    _.chain(navData)
      .map(item=>{
        hrefs.push(item.href);
        return item.child
      })
      .flatten()
      .compact()
      .each(item=>{
        hrefs.push(item.href)
      })
      .value();
    this.urlHrefs = hrefs;
  };

  render() {
    const {urlHrefs} = this;
    return (
      [
        <ProgressBar className="fixed-progress-bar" height="3px" isLoading={commonStore.LoadingBarState}
                     key="ProgressBar"/>,
        <AdminLayout key="AdminLayout">
          <Router>
            <Route render={({location}) => (
              <TransitionGroup>
                <CSSTransition key={location.pathname} classNames="fade" timeout={450}>
                  <Switch location={location}>
                    <Route exact path="/" component={Test}/>
                    <PrivateRoute rules={urlHrefs} path="/usermanager" component={UserManager}/>
                    <PrivateRoute rules={urlHrefs} path="/supplier/contract" component={Contract}/>
                    <PrivateRoute rules={urlHrefs} path="/supplier/cost" component={Cost}/>
                    <Route path="/empty" component={Empty}/>
                    <Route component={Error404}/>
                  </Switch>
                </CSSTransition>
              </TransitionGroup>
            )}/>
          </Router>
        </AdminLayout>,
        <DevTools key="devtools"/>
      ]
    )
  }
}

export default Admin
